<template>
<div>
  <div class="head">
    <div class="head-a"></div>
    <div class="log">
      <img src="http://m.wangjiu.com/htmlResource/images/index/k01.png" alt="">
    </div>
    <div class="con">
      <input type="text">
      <a href="javascript:;" class="search">搜索商品</a>
    </div>
  </div>
  <div class="pic">
    <mt-swipe :auto="4000">
      <mt-swipe-item><img src="http://img3.wangjiu.com/ad/20161223/default/1482490659629987" alt=""></mt-swipe-item>
      <mt-swipe-item><img src="http://img1.wangjiu.com/ad/20170731/default/1501491865971699"></mt-swipe-item>
      <mt-swipe-item><img src="http://img2.wangjiu.com/ad/20170825/default/1503626775972024"></mt-swipe-item>
      <mt-swipe-item><img src="http://img0.wangjiu.com/ad/20170810/default/1502349787402723"></mt-swipe-item>
      <mt-swipe-item><img src="http://img1.wangjiu.com/ad/20170825/default/1503626788783930"></mt-swipe-item>
      <mt-swipe-item><img src="http://img0.wangjiu.com/ad/20170622/default/1498111805830148"></mt-swipe-item>
      <mt-swipe-item><img src="http://img3.wangjiu.com/ad/20170706/default/1499326737781151"></mt-swipe-item>
      <mt-swipe-item><img src="http://img3.wangjiu.com/ad/20161223/default/1482490659629987"></mt-swipe-item>
      <mt-swipe-item><img src="http://img1.wangjiu.com/ad/20170731/default/1501491865971699"></mt-swipe-item>
    </mt-swipe>
  </div>
  <ul class="menu">
    <li v-for="(k,index) in result" :key="index">
      <img :src="k.ad_source_imgpath" alt="">
      <p>{{ k.ad_schedule_name }}</p>
    </li>
  </ul>
  <split></split>
  <div class="banner">
    <div class="ba-a">
      <div class="ba-1">
        <img src="http://img0.wangjiu.com/ad/20170705/default/1499243975185919" alt="">
      </div>
      <div class="ba-2">
        <img src="http://img0.wangjiu.com/ad/20170823/default/1503471171110674" alt="">
        <img src="http://img0.wangjiu.com/ad/20170810/default/1502350055783735" alt="">
      </div>
    </div>
    <div class="ba-b">
      <img src="http://img0.wangjiu.com/ad/20170713/default/1499937368047267" alt="">
      <img src="http://img0.wangjiu.com/ad/20170630/default/1498805745002343" alt="">
    </div>
  </div>
  <div class="tu">
    <img src="http://img0.wangjiu.com/ad/20170706/default/1499321183693521" alt="">
  </div>
  <split></split>
  <ul class="gift">
    <li v-for="(k,index) in result2" :key="index">
      <img :src="k.ad_source_imgpath" alt="">
    </li>
  </ul>
</div>
</template>

<script>
import Vue from 'vue'
import Axios from 'axios'
import split from '../split/split'
import 'mint-ui/lib/style.css'
import {Swipe, SwipeItem} from 'mint-ui'
Vue.component(Swipe.name, Swipe)
Vue.component(SwipeItem.name, SwipeItem)
let url = 'http://localhost:8080/static/data/menu.json'
let url2 = 'http://localhost:8080/static/data/gift.json'
Vue.prototype.$http = Axios

export default {
  data () {
    return {
      result: [],
      result2: []
    }
  },
  created () {
    let self = this
    Axios.get(url).then(function (res) {
      self.result = res.data.result
      console.log(self.result)
    })
    Axios.get(url2).then(function (res) {
      self.result2 = res.data.result
      console.log(self.result2)
    })
  },
  components: {
    split
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
.head
  width:100%
  position:fixed
  z-index:2
  height:30px
  // background:red
  padding-top:10px
  .head-a
    background:#ffffff
    opacity:0
    height:50px
    position:absolute
    width:100%
    top:0
    left:0
    bottom:0
    z-index:-1
  .log
    position:absolute
    width:18px
    right:15px
    margin-top:3px
    img 
      width:100%
  .con
    background-color:rgba(238,238,238,0.55)
    border-radius:5px
    width:250px
    height:23px
    margin-left:70px
    input[type="text"]
      display:none
      border:0
      width:100%
      float:left
      background:none
    a
      width:90px
      background:url(img/search.png) no-repeat 3px/14px
      position:absolute
      left:40%
      top:33%
      padding-left:23px
.pic
  width:100%
  height:220px
  img
    width:100%
.menu
  width:100%
  height:85px
  display:flex
  li
    text-align:center
    width:25%
    img
      width:40px
      margin-top:10px
    a
      color:black
    p
      margin-top:3px
.banner 
  width:100%
  height:325px
  position:relative
  .ba-a
    width:100%
    height:225px
    .ba-1
      width:50%
      height:130px
      float:left
      img   
        width:100%
    .ba-2
      width:50%
      height:60px
      float:left
      img 
        width:100%
  .ba-b
    width:100%
    height:100px
    img 
      width:50%
      float:left
.tu
  width:100%
  height:95px
  background:red
  img 
    width:100%
.gift
  width:100%
  height:200px
  background:pink
  display:flex
  li
    width:50%
    height:80px
    img 
      width:100%
</style>
